<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="300px">
                <el-row class="tac">
                    <el-col :span="12">
                        <h5 class="mb-2"></h5>
                        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                            default-active="2" text-color="#fff">
                            <el-sub-menu index="1">
                                <template #title>
                                    <div class="demo-type">
                                        <div class="avatar-preview">
                                            <img :src="avatar" alt="用户头像" v-if="avatar" class="avatar-img"
                                                style="height: 50px; width: 50px;">
                                            <el-avatar :icon="UserFilled" v-else class="default-avatar" />
                                        </div>
                                    </div>
                                    <span style="font-size: 32px;">{{ username }}</span>
                                </template>
                            </el-sub-menu>
                            <el-menu-item index="2" @click="navigateTo('/mycontent/account')">
                                <el-icon><icon-menu /></el-icon>
                                <span>账号</span>
                            </el-menu-item>
                            <el-menu-item index="3" @click="navigateTo('/mycontent/password')">
                                <el-icon>
                                    <setting />
                                </el-icon>
                                <span>更改密码</span>
                            </el-menu-item>
                            <el-menu-item index="4" @click="navigateTo('/mycontent/privacy')">
                                <el-icon>
                                    <setting />
                                </el-icon>
                                <span>隐私</span>
                            </el-menu-item>
                            <el-menu-item index="5" @click="navigateTo('/mycontent/delete-account')">
                                <el-icon>
                                    <setting />
                                </el-icon>
                                <span>删除账号</span>
                            </el-menu-item>
                            <el-menu-item index="6" @click="navigateTo('/mycontent/tag_management')">
                                <el-icon>
                                    <setting />
                                </el-icon>
                                <span>标签管理</span>
                            </el-menu-item>
                            <el-menu-item index="7" @click="navigateTo('/mycontent/type_management')">
                                <el-icon>
                                    <setting />
                                </el-icon>
                                <span>分类管理</span>
                            </el-menu-item>
                            <el-menu-item index="8" @click="navigateTo('/mycontent/article')">
                                <el-icon>
                                    <setting />
                                </el-icon>
                                <span>文章管理</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-container>
                <el-header>
                    <button @click="gotohome"><strong>返回</strong></button>
                    <span style="font-size: 32px;">我是个人主页</span>
                </el-header>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { RouterView } from 'vue-router';
import { ElMessage } from 'element-plus';
import { UserFilled } from '@element-plus/icons-vue'
import {
    Menu as IconMenu, Setting,
} from '@element-plus/icons-vue'
import request from '@/request';
const router = useRouter()
const navigateTo = (path: string) => {
    router.push(path);
};
function gotohome() {
    router.push('/home')
}
const username = ref('')
const avatar = ref('')
onMounted(() => {
    request({
        url: '/account/',
        method: 'get'
    }).then(response => {
        if (response.status == 200) {
            username.value = response.data.username
            avatar.value = response.data.avatar
            ElMessage.success('获取用户信息成功')
        }
    }).catch(error => {
        ElMessage.error('获取数据失败' + error)
    })
})
</script>
<style scoped>
.demo-type {
    display: flex;
}

.demo-type>div {
    flex: 1;
    text-align: center;
}

.demo-type>div:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 保持比例填充 */
  border-radius: 50%;
}
</style>